<!-- 登录页面 -->
<template>
  <div class="container">
    <div class="image-container">
      <img src="../assets/logo.png" alt="logo" class="full-image">
    </div>
    <div style="width: 40%;">
      <el-card class="box-card">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="left" label-width="70px"
          class="login-from">
          <h2>华得来后台管理系统</h2>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="btnGroup">
          <el-button type="primary" @click="submitForm" v-loading="loading">登录</el-button>
          <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
        ],
      },
      loading: false, // 是否显示加载动画
    };
  },
  methods: {
    submitForm() {
      this.loading = true;
      this.axios
        .post("/adminLogin", this.ruleForm)
        .then((response) => {
          this.loading = false;
          if (response.data.status === 200) {
            sessionStorage.setItem("Authorization", response.data.data); //将后端传回的headers中的Authorization存放在sessionStorage中
            if (this.$route.query.redirect) {
              this.$router.replace("/login");
            } else {
              this.$router.replace("/system/userlist");
            }
          } else {
            this.$router.replace("/login");
            this.$message.error("用户名或密码错误");
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        this.ruleForm.username = '';
        this.ruleForm.password = '';
      }
    },
  },
};
</script>
<style scoped>
/* 添加全局样式，去除滚动条 */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.image-container {
  width: 60%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}

.full-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 或者使用 contain，取决于您想要的效果 */
}

/* 设置登录面板的样式 */
.box-card {
  width: 100%;
  margin-right: 0px;
  text-align: center;
  height: 100vh;
  color: #fff;
  background-color: #97aec5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 设置标题样式 */
h2 {
  color: #333;
  margin-bottom: 20px;
  font-size: 28px;
}

/* 设置登录面板中的表单居中 */
.login-from {
  margin: 0 auto;
  width: 400px;
  font-size: 18px;
}

/* 调整表单项样式 */
:deep(.el-form-item__label) {
  font-size: 18px !important;
  color: #333 !important;
  white-space: nowrap !important;
  /* 防止标签换行 */
}

:deep(.el-form-item) {
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

:deep(.el-input__inner) {
  font-size: 18px !important;
  height: 45px !important;
  line-height: 45px !important;
}

/* 设置按钮组样式 */
.btnGroup {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* 调整按钮样式 */
.btnGroup .el-button {
  font-size: 18px !important;
  padding: 12px 25px;
}
</style>